<template>
  <div class="container">
    <div class="userInfo-page">
      <ul class="list">
        <li class="item" :class="{ 'on': focusIndex == 1 }">
          <div class="title">您的姓名</div>
          <input class="input-item" type="text" placeholder="请填写姓名" v-model="formData.name" @focus="focusIndex = 1" @blur="focusIndex = 0">
        </li>
        <li class="item" :class="{ 'on': focusIndex == 2 }">
          <div class="title">手机号码</div>
          <input class="input-item" type="text" placeholder="请填写手机号码" v-model="formData.mobile" @focus="focusIndex = 2" @blur="focusIndex = 0">
        </li>
        <li class="item" :class="{ 'on': focusIndex == 3 }">
          <div class="title">微信号码</div>
          <input class="input-item" type="text" placeholder="请填写微信号" v-model="formData.wx_code" @focus="focusIndex = 3" @blur="focusIndex = 0">
        </li>
        <li class="item" @click="getMap">
          <div class="title">地址</div>
          <div class="content" v-if="formData.address">{{ formData.address }}</div>
          <div class="content off" v-else>请选择地址</div>
          <div class="icon">
            <img class="image" src="/static/images/icon/location.png" alt="">
          </div>
        </li>
      </ul>
      <div class="button">
        <button class="btn" :class="{ 'off': isSubmit }" :disabled="isSubmit" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      /*
       * focusIndex           获取焦点下标
       * isSubmit             判断是否已提交
       */
      focusIndex: 0,
      isSubmit: false,

      formData: {
        id: '',
        name: '',
        mobile: '',
        wx_code: '',
        address: '',
        lng: '',
        lat: '',
      },
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
  },

  methods: {
    submit () {
      let self = this;
      self.$toast.show();
      self.isSubmit = true;
      self.$axios.userInfo(self.formData).then(res=>{
       self.$toast.hide();
       self.isSubmit = false;
        if (0 === res.data.code * 1) {
          self.$toast.show({
            title: '修改成功',
            icon: 'success',
            duration: 1500,
          });
          self.$store.dispatch('getUserInfo', res.data.data);
        }else {
          self.$toast.show({
            title: '网络错误',
            icon: 'none',
            duration: 1500,
          });
        }
      })
    },
    getMap () {
      let self = this;
      this.$authorize({
        auth: 'scope.userLocation',
        content: '微信选择地址需要您的授权，请前往设置'
      }).then((res) => {
        wx.chooseLocation({
          success (res) {
            if (res.address) {
              self.formData.address = res.address;
              self.formData.lng = res.longitude;
              self.formData.lat = res.latitude;
            }
          }
        })
      }).catch((res) => {
        self.$toast.show({
          title: '操作失败',
          icon: 'none',
          duration: 1500,
        });
      })
    },
  },

  mounted () {
    let { id , name ,mobile ,wx_code, address, lng, lat } = this.userInfo;
    this.formData =  { id , name, mobile, wx_code, address, lng, lat };
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
